<%@ page import="com.blog.entity.Blog"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	Blog blog = (Blog) request.getAttribute("BlogShowInBlog");
	String blogImage = blog.getPhoto().substring(0, 9) + "/" + blog.getPhoto().substring(10);
%>
<base href="<%=basePath%>}">

<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>我的博客</title>
<meta name="format-detection" content="telephone=no">
<meta name="theme-color" content="#ffffff">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="shortcut icon" href="blog/img/favicon.png">
<link rel="preconnect" href="//cdn.jsdelivr.net" />
<link rel="preconnect" href="//busuanzi.ibruce.info" />
<link rel="stylesheet" href="blog/css/index.css">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css">
<style type="text/css">
#nav {
	opacity: 1
}

.justified-gallery img {
	opacity: 1
}
</style>


<script>
  var GLOBAL_CONFIG = {
      root: '/',
      hexoversion: '5.1.1',
      algolia: undefined,
      localSearch: undefined,
      translate: undefined,
      noticeOutdate: undefined,
      highlight: { "plugin": "highlighjs", "highlightCopy": true, "highlightLang": true },
      copy: {
        success: '复制成功',
        error: '复制错误',
        noSupport: '浏览器不支持'
      },
      bookmark: {
        message_prev: '按',
        message_next: '键将本页加入书签'
      },
      runtime: '',
      date_suffix: { "one_hour": "刚刚", "hours": "小时前", "day": "天前" },
      copyright: undefined,
      ClickShowText: undefined,
      medium_zoom: false,
      fancybox: true,
      Snackbar: undefined,
      justifiedGallery: {
        js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
        css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
      },
      baiduPush: false,
      isPhotoFigcaption: false,
      islazyload: false,
      isanchor: false
    };

    var saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
    </script>
<script id="config_change">
  var GLOBAL_CONFIG_SITE = {
      isPost: true,
      isHome: false,
      isHighlightShrink: false,
      isSidebar: true,
      postUpdate: '2020-09-07 22:51:31'
    }
    </script>



<script>
  var activateDarkMode = function () {
      document.documentElement.setAttribute('data-theme', 'dark')
      if (document.querySelector('meta[name="theme-color"]') !== null) {
        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
      }
    }
    var activateLightMode = function () {
      document.documentElement.setAttribute('data-theme', 'light')
      if (document.querySelector('meta[name="theme-color"]') !== null) {
        document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
      }
    }

    var autoChangeMode = 'false'
    var t = saveToLocal.get('theme')
    if (autoChangeMode === '1') {
      var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
      var isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
      var isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
      var hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified

      if (t === undefined) {
        if (isLightMode) activateLightMode()
        else if (isDarkMode) activateDarkMode()
        else if (isNotSpecified || hasNoSupport) {
          var now = new Date()
          var hour = now.getHours()
          var isNight = hour <= 6 || hour >= 18
          isNight ? activateDarkMode() : activateLightMode()
        }
        window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
          if (saveToLocal.get('theme') === undefined) {
            e.matches ? activateDarkMode() : activateLightMode()
          }
        })
      } else if (t === 'light') activateLightMode()
      else activateDarkMode()
    } else if (autoChangeMode === '2') {
      now = new Date()
      hour = now.getHours()
      isNight = hour <= 6 || hour >= 18
      if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
      else if (t === 'light') activateLightMode()
      else activateDarkMode()
    } else {
      if (t === 'dark') activateDarkMode()
      else if (t === 'light') activateLightMode()
    }</script>
<meta name="generator" content="Hexo 5.1.1">
</head>

<body>
	<div id="mobile-sidebar">
		<div id="menu_mask"></div>
		<div id="mobile-sidebar-menus">
			<hr />
		</div>
	</div>
	<div id="body-wrap">
		<div id="sidebar">
			<i class="fas fa-arrow-right on" id="toggle-sidebar"></i>
			<div class="sidebar-toc">
				<div class="sidebar-toc__title">目录</div>
				<div class="sidebar-toc__progress">
					<span class="progress-notice">你已经读了</span><span
						class="progress-num">0</span><span class="progress-percentage">%</span>
					<div class="sidebar-toc__progress-bar"></div>
				</div>
				<div class="sidebar-toc__content"></div>
			</div>
		</div>
		<header class="post-bg" id="page-header"
			style="background-image: url(https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png)">
			<nav id="nav">
				<span id="blog_name"><a id="site-name" href="blog/index.jsp">我的博客</a></span><span
					id="menus">
					<div class="menus_items">
						<div class="menus_item">
							<a class="site-page" href="blog/index.jsp"><i
								class="fa-fw fas fa-home"></i><span> 首页</span></a>
						</div>
						<div class="menus_item">
							<a class="site-page" href="blog/archives.jsp"><i
								class="fa-fw fas fa-archive"></i><span> 时间轴</span></a>
						</div>
						<div class="menus_item">
							<a class="site-page" href="blog/tags.jsp"><i
								class="fa-fw fas fa-tags"></i><span> 标签</span></a>
						</div>
						<div class="menus_item">
							<a class="site-page" href="blog/categories.jsp"><i
								class="fa-fw fas fa-folder-open"></i><span> 分类</span></a>
						</div>

						<div class="menus_item">
							<a class="site-page" href="blog/link.jsp"><i
								class="fa-fw fas fa-link"></i><span> 友链</span></a>
						</div>
						<div class="menus_item">
							<a class="site-page" href="blog/about.jsp"><i
								class="fa-fw fas fa-heart"></i><span> 关于</span></a>
						</div>
					</div> <span class="close" id="toggle-menu"><a class="site-page"><i
							class="fas fa-bars fa-fw"></i></a></span>
				</span>
			</nav>
			<div id="post-info">
				<div id="post-title">
					<div class="posttitle">${requestScope.BlogShowInBlog.title}</div>
				</div>
				<div id="post-meta">
					<div class="meta-firstline">
						<span class="post-meta-date"><i
							class="far fa-calendar-alt fa-fw post-meta-icon"></i><span
							class="post-meta-label">发表于</span> <time
								class="post-meta-date-created"
								datetime="2020-09-07T09:26:15.103Z"
								title="发表于 ${requestScope.BlogShowInBlog.uploadTime}">发表于
								${requestScope.BlogShowInBlog.uploadTime}</time><span
							class="post-meta-separator">|</span><i
							class="fas fa-history fa-fw post-meta-icon"></i><span
							class="post-meta-label">更新于</span> <time
								class="post-meta-date-updated"
								datetime="2020-09-07T14:51:31.091Z"
								title="更新于 ${requestScope.BlogShowInBlog.updateTime}">更新于
								${requestScope.BlogShowInBlog.updateTime}</time></span> <span
							class="post-meta-categories"><span
							class="post-meta-separator">|</span><i
							class="fas fa-inbox fa-fw post-meta-icon"></i><a
							class="post-meta-categories"
							href="blog/detailCategory.jsp?CategoryName=${requestScope.BlogShowInBlog.catalog}">${requestScope.BlogShowInBlog.catalog}</a>
						</span>
					</div>
					<div class="meta-secondline">
						<span class="post-meta-separator">|</span> <span
							class="post-meta-pv-cv"><i
							class="far fa-eye fa-fw post-meta-icon"></i><span
							class="post-meta-label">阅读量:</span><span
							id="busuanzi_value_page_pv">${requestScope.BlogShowInBlog.view}</span>
						</span>
					</div>
				</div>
			</div>
		</header>
		<main class="layout_post" id="content-inner">
		<article id="post">
			<div class="post-content" id="article-container">
				${requestScope.BlogShowInBlog.content}</div>
			<div class="post-copyright">
				<div class="post-copyright__author">
					<span class="post-copyright-meta">文章作者: </span><span
						class="post-copyright-info"><a href="mailto:undefined">${requestScope.InformationShowBlog.name}</a></span>
				</div>
				<div class="post-copyright__type">
					<span class="post-copyright-meta">文章链接: </span><span
						class="post-copyright-info"><a
						href="BlogShowServlet?blogID=${requestScope.BlogShowInBlog.id}">BlogShowServlet?blogID=${requestScope.BlogShowInBlog.id}</a></span>
				</div>
				<div class="post-copyright__notice">
					<span class="post-copyright-meta">版权声明: </span><span
						class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a
						href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
						target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a
						href="http://example.com" target="_blank">${requestScope.SiteShowBlog.name}</a>！
					</span>
				</div>
			</div>
			<div class="tag_share">
				<div class="post-meta__tag-list">
					<c:forEach items="${requestScope.tagsList}" var="tag">
						<a class="post-meta__tags"
							href="blog/detailTag.jsp?tagName=${tag}">${tag}</a>
					</c:forEach>
				</div>
				<div class="post_share">
					<div class="social-share"
						data-image="https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png"
						data-sites="facebook,twitter,wechat,weibo,qq"></div>
					<link rel="stylesheet"
						href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css">
					<script
						src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js"
						defer></script>
				</div>
			</div>
			<div class="post-reward">
				<div class="reward-button">
					<i class="fas fa-qrcode"></i> 打赏
					<div class="reward-main">
						<ul class="reward-all">
							<li class="reward-item"><a href="blog/img/wechat.jpg"
								target="_blank"><img class="post-qr-code-img"
									src="blog/img/wechat.jpg" alt="wechat" /></a>
								<div class="post-qr-code-desc">微信</div></li>
							<li class="reward-item"><a href="blog/img/alipay.jpg"
								target="_blank"><img class="post-qr-code-img"
									src="blog/img/alipay.jpg" alt="alipay" /></a>
								<div class="post-qr-code-desc">支付宝</div></li>
						</ul>
					</div>
				</div>
			</div>

			<hr>
			<div id="post-comment">
				<div class="comment_headling">
					<i class="fa fa-comments fa-fw" aria-hidden="true"></i><span>
						评论</span>
				</div>
				<div class="vcomment" id="vcomment"></div>
				<script src="https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script>
				<script>
                var GUEST_INFO = ['nick','mail','link'];
                var guest_info = 'nick,mail,link'.split(',').filter(function(item){
                    return GUEST_INFO.indexOf(item) > -1
                });
                guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;

                window.valine = new Valine({
                    el:'#vcomment',
                    notify: false,
                    verify: false,
                    appId: '${requestScope.ShowComment.appId}',
                    appKey: '${requestScope.ShowComment.appKey}',
                    placeholder: '${requestScope.ShowComment.placeholder}',
                    avatar: 'monsterid',
                    meta: guest_info,
                    pageSize: '10',
                    lang: 'zh-cn',
                    recordIP: false,
                    serverURLs: ''
                });
                </script>
			</div>
		</article>
		</main>
		<jsp:include page="footer.jsp" />
	</div>
	<section id="rightside">
		<div id="rightside-config-hide">
			<button id="darkmode" type="button" title="浅色和深色模式转换">
				<i class="fas fa-adjust"></i>
			</button>
		</div>
		<div id="rightside-config-show">
			<button id="rightside_config" type="button" title="设置">
				<i class="fas fa-cog"></i>
			</button>
			<button class="close" id="mobile-toc-button" type="button" title="目录">
				<i class="fas fa-list-ul"></i>
			</button>
			<button id="go-up" type="button" title="回到顶部">
				<i class="fas fa-arrow-up"></i>
			</button>
		</div>
	</section>
	<div>
		<script
			src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
		<script src="blog/js/utils.js"></script>
		<script src="blog/js/main.js"></script>
		<script
			src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script>
		<div class="js-pjax">
			<script async
				src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
		</div>
	</div>
	<script>
    $(function () {

        var tags="${requestScope.BlogShowInBlog.tags}".split(',');

        //对上一篇下一篇动态显示
        if("${requestScope.isFirstOrRecentOrOther}"=="1"){
            //只显示上一篇
            $(".next-post").css("display","none"); //下面的div不显示
            $(".prev-post").addClass("pull-full");
        }else if("${requestScope.isFirstOrRecentOrOther}"=="2"){
            //只显示下一篇
            $(".next-post").css("display","none"); //下面的div不显示
            $(".prev-post").removeClass("pull_left");
            $(".prev-post").addClass("pull-right");
            $(".pagination-info .label").text("下一篇")
        }

//         var word_count=$(".word-count").html();
//         $(".word-count").html(word_count.length);


        //comment相关信息
        $("#veditor").css("backgroundImage","url("+"${requestScope.ShowComment.placePhoto}"+")");
        if("${requestScope.ShowComment.flag}"!="true"){
            $("#post-comment").css("display","none");
        }


        //获取顶部图片链接地址
        var photoHref="url("+"<%=blogImage%>"+")";
        //顶部背景图片
        if(photoHref.indexOf("BlogPhoto")!=-1){
            $(".post-bg").css("background-image",photoHref);
        }else{
            $(".post-bg").css("background-image","url("+'${requestScope.BlogShowInBlog.photo}'+")");
        }


        var headsContent=[];
        var headsTag=[];

        function getH1ToH6() {
            //查找h1-h6
            $("#article-container :header").each(function(){
                headsContent.push($(this).html());
                headsTag.push($(this).prop("tagName"));
            });
        }
        getH1ToH6();


        //将标题存入侧边栏
        for(var i=0;i<headsContent.length;i++){
            $(".toc-level-1").append("<span class='toc-text'>"+headsTag[i]+"  "+headsContent[i]+"</span><br>")
        }


    })
</script>
</body>

</html>